<template>
  <el-card class="box-card" ref="modellist">
    <div slot="header" class="clearfix">
      <span>被授权的模型</span>
      <el-button style="float: right; padding: 3px 4px; height: 35px; width: 80px" type="primary" @click="createModel()">创建模型</el-button>
    </div>
    <div class="contenttable">
      <el-table
      :data="tableData"
      style="width: 100%">
      <!-- <el-table-column
        prop="id"
        label="id"
        width="300">
      </el-table-column> -->
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="creator"
        label="创建者">
        </el-table-column>
      <el-table-column
        prop="role_value"
        label="角色">
        </el-table-column>
      <el-table-column
        prop="create_date"
        label="创建日期"
        width="210">
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看详情" placement="top">
          <el-button type="primary" icon="el-icon-search" circle @click="showModelDetail(scope.row.id, scope.row.role)" :disabled="scope.row.role>=4"></el-button>
          </el-tooltip>
          <!-- <el-tooltip class="item" effect="light" content="编辑" placement="top">
          <el-button type="primary" icon="el-icon-edit" circle @click="modifyUser(scope.row.phone)"></el-button>
          </el-tooltip> -->
          <el-tooltip class="item" effect="light" content="删除" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteModelProcess1(scope.row.id, scope.row.name)" v-show="scope.row.role<=0" :disabled="scope.row.role>=1"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="授权" placement="top">
          <el-button type="warning" icon="el-icon-star-off" circle @click="grantModelProcess1(scope.row.id, scope.row.name)" v-show="scope.row.role<=1" :disabled="scope.row.role>=2"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="成员管理" placement="top">
          <el-button type="success" icon="el-icon-user-solid" circle @click="manageModelMember(scope.row.id)" v-show="scope.row.role<=1" :disabled="scope.row.role>=2"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="开放性">
        <template slot-scope="scope">
        <!-- <el-tooltip class="item" effect="light" content="成员管理" placement="top"> -->
          <el-switch
          :disabled="scope.row.role>=1"
          v-model="scope.row.public"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="公共"
          inactive-text="私有"
          :active-value=1
          :inactive-value=0
          @change="changePublicProcess($event, scope.row.id)">
          </el-switch>
        </template>
          <!-- </el-tooltip> -->
      </el-table-column>
    </el-table>
    </div>
    <el-dialog
     title="提示"
     :visible.sync="deleteData.deleteDialogVisible"
     width="30%"
     :before-close="handleClose">
      <span>是否删除模型{{deleteData.deleteName}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteData.deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteModelProcess2()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
     :title='"授权模型"+grantData.grantName'
     :visible.sync="grantData.grantDialogVisible"
     width="30%"
     :before-close="handleClose">
      <div class="itemgrant">授权用户：
        <el-select v-model="grantData.grantUser" filterable remote placeholder="请选择用户" :remote-method="searchEmails">
          <el-option
          v-for="item in grantData.users"
          :key="item"
          :label="item"
          :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="itemgrant">授权角色：
        <el-select v-model="grantData.grantRole" placeholder="请选择角色">
          <el-option
          v-for="item in grantData.grantRoles"
          :key="item.role"
          :label="item.name"
          :value="item.role">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="grantData.grantDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="grantModelProcess2()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import { getModelListGrant, deleteModel, grantModel, changeModelPublic } from '@/api/request/model'
import { searchUsers } from '@/api/request/user'
// import store from '@/store/store'
export default {
//   props: ['title'],
  data () {
    return {
      tableData: null,
      //   title: '我创建的数据集'
      deleteData: {
        deleteDialogVisible: false,
        deleteID: '',
        deleteName: ''
      },
      grantData: {
        users: null,
        grantUser: null,
        grantDialogVisible: false,
        grantID: '',
        grantName: '',
        grantRole: null,
        grantRoles: [
          {
            name: '创建者',
            role: 0
          },
          {
            name: '管理者',
            role: 1
          },
          {
            name: '编辑者',
            role: 2
          },
          {
            name: '使用者',
            role: 3
          }
        ]
      }
    }
  },
  methods: {
    update () {
      getModelListGrant().then(response => {
        this.tableData = response
        for (var i = 0; i < this.tableData.length; i++) {
          switch (this.tableData[i].role) {
            case 0:
              this.tableData[i].role_value = '创建者'
              break
            case 1:
              this.tableData[i].role_value = '管理者'
              break
            case 2:
              this.tableData[i].role_value = '编辑者'
              break
            case 3:
              this.tableData[i].role_value = '使用者'
              break
          }
        }
      })
    //   this.refreshKey = !this.refreshKey
    },
    showModelDetail (id, role) {
      this.$router.push({path: '/model/detail', query: {model_id: id, role: role}})
    },
    deleteModelProcess1 (id, name) {
      this.deleteData.deleteDialogVisible = true
      this.deleteData.deleteID = id
      this.deleteData.deleteName = name
    },
    deleteModelProcess2 () {
      this.deleteData.deleteDialogVisible = false
      deleteModel({model_id: this.deleteData.deleteID}).then(response => {
        this.update()
      })
    },
    grantModelProcess1 (id, name) {
      this.grantData.grantUser = null
      this.grantData.grantDialogVisible = true
      this.grantData.grantID = id
      this.grantData.grantName = name
    },
    grantModelProcess2 () {
      this.grantData.grantDialogVisible = false
      grantModel({model_id: this.grantData.grantID, email: this.grantData.grantUser, role: this.grantData.grantRole}).then(response => {
        this.update()
      })
    },
    manageModelMember (id) {
      this.$router.push({path: '/model/member', query: {model_id: id}})
    },
    searchEmails (content) {
      searchUsers({content: content}).then(response => {
        this.grantData.users = response.users
      })
    },
    changePublicProcess (publicStatus, modelID) {
      changeModelPublic({model_id: modelID, public: publicStatus}).then(response => {
        // this.update()
      })
    },
    createModel () {
      this.$router.push('/model/create')
    }
  },
  // created () {
  //   console.log('created')
  //   this.update()
  // },
  activated () {
    // if (store.datasetInfo.list_type === this.list_type) {
    //   console.log('==')
    //   return
    // }
    this.update()
  }
//   watch: {
//     '$route': function (to, from) {
//       this.update()
//     // from 对象中包含当前地址
//     // to 对象中包含目标地址
//     }
//   }
}
</script>
<style scoped>
  .itemgrant {
    margin-left: 1px;
    margin-bottom: 18px;
  }
  .contenttable {
    margin: 20px;
  }
  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
